<template>
  <div
    class="banner"
    @click="to('/pages-sub/hotel/photo-list/index', { id: hotelInfo.id })"
    v-if="hotelInfo.id && imgUrls.length > 0"
  >
    <image class="banner-img" :src="imgUrls[0]" mode="aspectFill" />
    <div class="total">
      <image src="/static/images/img-mini.png" mode="scaleToFill" />
      <span>1/{{ imgUrls.length }}</span>
      <wd-icon name="chevron-right" size="30rpx" color="#fff"></wd-icon>
    </div>
  </div>

  <div class="hotel-info" v-if="hotelInfo.id">
    <div class="name">{{ hotelInfo.hotelName }}</div>

    <div class="tags" v-if="hotelInfo.tags">
      <div class="tag" v-for="(item, index) in hotelInfo.tags" :key="index">{{ item }}</div>
    </div>

    <div class="score-location">
      <div
        class="score active"
        @click="to('/pages-sub/hotel/evaluate/index', { id: hotelInfo.id })"
      >
        <div class="num">{{ hotelInfo.score }}</div>
        <div class="text">
          <span>{{ hotelInfo.commentNum }}条点评</span>
          <wd-icon name="chevron-right" size="26rpx" color="#5C6066"></wd-icon>
        </div>
      </div>

      <div class="location active" @click="toLocation()">
        <div class="address">{{ hotelInfo.hotelAddr }}</div>
        <div class="map">
          <div class="icon">
            <span class="i-carbon-location-filled font"></span>
          </div>
          <span class="text">地图/周边</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { openLocation } from '@/utils/index'
import { to } from '@/utils/page'
defineOptions({ name: 'HotelInfo' })

const props = defineProps(['hotel'])

const imgUrls = ref([])
const hotelInfo = reactive<any>({})
if (props.hotel.hotelId) {
  http
    .get('/hotels-info-app/open/detail', {
      id: props.hotel.hotelId,
    })
    .then((res: any) => {
      Object.assign(hotelInfo, res)
      if (hotelInfo.imgUrls) {
        imgUrls.value = hotelInfo.imgUrls.split(',')
      }
    })
}

function toLocation() {
  openLocation({
    latitude: +hotelInfo.hotelLat,
    longitude: +hotelInfo.hotelLng,
    name: hotelInfo.hotelName,
    address: hotelInfo.hotelAddr,
  })
}
</script>
<style lang="scss" scoped>
.banner {
  position: relative;
  width: 100%;
  height: 500rpx;
  .banner-img {
    width: 100%;
    height: 100%;
  }
  .total {
    position: absolute;
    right: 28rpx;
    bottom: 60rpx;
    display: flex;
    align-items: center;
    height: 46rpx;
    padding: 0 10rpx 0 16rpx;
    font-size: 23rpx;
    color: #fff;
    letter-spacing: 0;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 23rpx;
    image {
      width: 30rpx;
      height: 30rpx;
      margin-right: 6rpx;
    }
    span {
      line-height: 1;
    }
  }
}

.hotel-info {
  position: relative;
  z-index: 2;
  padding: 46rpx 30rpx 50rpx;
  margin-top: -30rpx;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 10%, transparent 100%);
  border-radius: 30rpx;

  .name {
    font-size: 34rpx;
    font-weight: 600;
    line-height: 40rpx;
    color: var(--color1);
  }
  .tags {
    margin-top: 26rpx;
    .tag {
      display: inline-block;
      padding: 8rpx;
      margin-right: 8rpx;
      margin-bottom: 8rpx;
      font-size: 20rpx;
      line-height: 1;
      color: var(--color3);
      @include hairline(all, #dfe3e6, 8rpx);
    }
  }

  .score-location {
    display: flex;
    margin-top: 50rpx;
    .score {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 154rpx;
      height: 120rpx;
      background: #f7f8fc;
      border-radius: 24rpx;
      .num {
        font-size: 46rpx;
        font-weight: 700;
        line-height: 1;
        color: #ffaa00;
        &::after {
          font-size: 23rpx;
          color: var(--color1);
          content: '分';
        }
      }
      .text {
        margin-top: 6rpx;
        font-size: 20rpx;
        color: var(--color4);
        span {
          line-height: 1;
        }
      }
    }
    .location {
      display: flex;
      flex: 1;
      align-items: center;
      width: 0;
      height: 120rpx;
      padding: 0 30rpx;
      margin-left: 16rpx;
      background: #effbfb url(./images/location.png) 0 0 no-repeat;
      background-size: 100% 100%;
      border-radius: 24rpx;
      .address {
        flex: 1;
        width: 0;
        font-size: 27rpx;
        @include text-clamp(2);
        line-height: 34rpx;
      }
      .map {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
        .icon {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 38rpx;
          height: 38rpx;
          background-color: #8da4cd;
          border-radius: 50%;
          .font {
            font-size: 20rpx;
            color: #fff;
          }
        }
        .text {
          margin-top: 8rpx;
          font-size: 22rpx;
          color: var(--color1);
        }
      }
    }
  }
}
</style>
